<script setup>
    import { getCurrentInstance, ref, inject} from 'vue';
    import { useRouter } from 'vue-router'
    const axios = getCurrentInstance().proxy.$http;

    const router = useRouter();

    const emitter = inject('emitter');
  
    // 获取榜单数据(前三个)
    const getTopList = ref(); 
    (async () => {
        const { data } = await axios.get('/toplist');
        getTopList.value = data.list.slice(0, 3);
        getTopList.value.forEach(async (item, index) => {
            const { data } = await axios.get(`/top/list?id=${item.id}`);
            getTopList.value[index].tracks = data.playlist.tracks.slice(0, 10);
        }) 
    })()

    // 跳转到歌曲详情
    const toSong = (id) => {
        router.push({ name: 'song', query: { id}});
        // emitter.emit('discoverNavStyleToggle') 
    }

    // 导入获取播放数据的方法
    const playMusic = async id => {
        emitter.emit('play', id); 
    }

</script>

<template>
    <!-- 榜单 -->
    <div class="list">
        <header class="header-list">
            <div class="header-left">
                <div class="point">
                    <div class="tag"></div>
                </div>    
                <em>榜单</em>
            </div>
            <div class="header-more">
                <span>更多</span>
                <img src="../../../assets/img/header-right.png" alt="">
            </div>
        </header>
        <main class="content">
            <template 
                v-for="item of getTopList" 
                :key="item.id"
            >
                <div class="column">
                    <header>
                        <img :src="item.coverImgUrl">
                        <div>
                            <em>{{item.name}}</em>
                            <br>
                            <img src="../../../assets/img/play-circle.png">
                            <img src="../../../assets/img/Collection.png" alt="">
                        </div>
                    </header>
                    <section>
                        <ol>
                            <li
                                v-for="(value, index) of item.tracks"     
                                :key="index"
                            >
                                <i>{{index + 1}}</i>
                                <span
                                    @click="toSong(value.id)"    
                                >{{value.name}}</span>
                                <div class="fun">
                                    <div @click="playMusic(value.id)"></div>
                                    <div></div>
                                    <div></div>
                                </div>
                            </li>
                        </ol>
                        <span class="more">查看更多></span>
                    </section>
                </div>
            </template>
        </main>
    </div>
</template>

<style lang='less' scoped>
    .list{
        margin-top: 20px;
        width: 100%;
        .header-list{
            height: 40px;
            border-bottom: 2.5px solid #c70c0c; 
            background-color: transparent;
            display: flex;
            align-items: center;
            
            .header-left{
                display: flex;
                align-items: center;
                .point{
                    width: 15px;
                    height: 15px;
                    border-radius: 50%;
                    background-color: #c70c0c;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-right: 10px;
                    .tag{
                        width: 40%;
                        height: 40%;
                        background-color: white;
                        border-radius: 50%;
                    }
                }
                em{
                    font-size: 20px;
                    cursor: pointer;
                }
            }

            .header-more{
                display: flex;
                align-items: center;
                margin-left: auto;
                span{
                    font-size: 13px;
                    cursor: pointer;
                    &:hover{
                        text-decoration: underline;
                    }
                }
                img{
                    margin-left: 10px;
                    width: 12px;
                }
            }
        }

        .content{
            display: flex;
            margin-top: 20px;
            background-color: rgb(247, 247, 247);
            border: 1px solid #ccc;
            .column{
                flex-grow: 1;
                display: flex;
                flex-direction: column;
                &:first-child{
                    border-right: 1px solid #ccc;
                }
                &:last-child{
                    border-left: 1px solid #ccc;
                }
                header{
                    padding: 20px 0 0 20px;
                    flex-grow: 1;
                    height: 120px;
                    display: flex;
                    align-items: center;
                    img{
                        width: 80px;
                        height: 80px;
                        &:hover{
                            box-shadow: 0 0 5px 1px #f40 inset;
                            border-radius: 5px; 
                        }
                    }
                    div{
                        height: 80px;
                        padding: 10px;
                        em{
                            font-size: 13px;
                            font-weight: 600;
                            margin-top: 10px;
                        }
                        img{
                            margin-top: 20px;
                            width: 22px;
                            height: 22px;
                            margin-right: 10px;
                            cursor: pointer;
                        }
                    }
                }

                section{
                    width: 100%;
                    display: flex;
                    flex-direction: column;
                    ol{
                        width: 100%;
                        li{
                            width: 100%;
                            height: 30px;
                            background-color: rgb(247, 247, 247);
                            line-height: 30px;
                            position: relative;
                            &:nth-child(2n+1) {
                                width: 100%;
                                height: 30px;
                                background-color: #e8e8e8;
                            }
                            &:nth-child(-n+3) {
                                i{
                                    color: #c10d0c;
                                    font-weight: 500;
                                }
                            }
                            i{
                                position: absolute;
                                right: 82%;
                                font-style: normal;
                                font-size: 15px;
                                color: #666;
                            }
                            span{
                                max-width: 165px;
                                position: absolute;
                                left: 23%;
                                font-size: 12px;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                                cursor: pointer;
                                &:hover{
                                    text-decoration: underline;
                                }
                            }
                            
                            &:hover{
                                span{
                                    max-width: 90px;
                                    overflow: hidden;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    white-space: nowrap;
                                }
                                .fun{
                                    display: block;
                                }
                            }

                            .fun{
                                height: 100%;
                                position: absolute;
                                right: 0px;
                                display: none;
                                div{
                                    width: 20px;
                                    height: 20px;
                                    float: left;
                                    padding: 1px;
                                    margin-left: 3px;
                                    margin-top: 3px;
                                    cursor: pointer;
                                    &:hover{
                                        box-shadow: 0 0 5px 1px #f40 inset;
                                        border-radius: 5px; 
                                    }
                                    &:first-child{
                                        background: url(../../../assets/img/play-circle.png);
                                        background-size: 100% 100%;
                                    }
                                    &:nth-child(2){
                                        background: url(../../../assets/img/add.png);
                                        background-size: 100% 100%;
                                    }
                                    &:last-child{
                                        background: url(../../../assets/img/Collection.png);
                                        background-size: 100% 100%;
                                        margin-right: 5px;
                                    }
                                }
                            }
                        }
                    }
                    .more{
                        width: 100%;
                        height: 30px;
                        line-height: 30px;
                        font-size: 12px;
                        background-color: #e8e8e8;
                        right: 10px;
                        cursor: pointer;
                        text-align: right;
                        &:hover{
                            text-decoration: underline;
                        }
                    }
                }
            }
            
        }
    }
</style>